<template>
  <div>
    <!-- 条形码容器，可选svg、canvas，或img标签 -->
    <svg id="barcode"></svg>
    <!-- or -->
    <canvas id="barcode2"></canvas>
    <!-- or -->
    <img id="barcode3" />
  </div>
</template>
<script>
import JsBarcode from 'jsbarcode'

export default {
  name: 'HomeView',
  methods:{
    createTcode(){
      JsBarcode('#barcode', 12345678,
       {
         displayValue: false // 是否在条形码下方显示文字
       }
     )
     JsBarcode('#barcode2', 19921108,
       {
         displayValue: true // 是否在条形码下方显示文字
       }
     )
     // 生成条形码
      JsBarcode('#barcode3', '12345678', {
          format: "CODE39",//选择要使用的条形码类型
          width:3,//设置条之间的宽度
          height:100,//高度
          displayValue:true,//是否在条形码下方显示文字
          text:"Axjy",//覆盖显示的文本
          fontOptions:"bold italic",//使文字加粗体或变斜体
          font:"fantasy",//设置文本的字体
          textAlign:"right",//设置文本的水平对齐方式
          textPosition:"top",//设置文本的垂直位置
          textMargin:5,//设置条形码和文本之间的间距
          fontSize:15,//设置文本的大小
          background:"#eee",//设置条形码的背景
          lineColor:"#FF7F50",//设置条和文本的颜色。
          margin:15//设置条形码周围的空白边距
      })
    }
  },
  mounted(){
    this.createTcode()
  }
}
</script>
